  <script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const activeIndex = ref('2')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
// 获取路由实例
const router = useRouter();
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
// 模拟不同种类皮肤病的数据
const infectiousDiseases = ref([
  {
    name: '带状疱疹',
    description: '由水痘 - 带状疱疹病毒引起，皮疹一般有单侧性和按神经节段分布的特点，由集簇性的疱疹组成，并伴有疼痛。由水痘 - 带状疱疹病毒引起，皮疹一般有单侧性和按神经节段分布的特点，由集簇性的疱疹组成，并伴有疼痛。由水痘 - 带状疱疹病毒引起，皮疹一般有单侧性和按神经节段分布的特点，由集簇性的疱疹组成，并伴有疼痛。',
    image: 'src/assets/images/case.png' // 替换为真实路径
  },
  {
    name: '脓疱疮',
    description: '主要由金黄色葡萄球菌或乙型溶血性链球菌引起，表现为丘疹、水疱或脓疱，易破溃结蜜黄色痂。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '带状疱疹',
    description: '由水痘 - 带状疱疹病毒引起，皮疹一般有单侧性和按神经节段分布的特点，由集簇性的疱疹组成，并伴有疼痛。',
    image: 'src/assets/images/case.png' // 替换为真实路径
  },
  {
    name: '脓疱疮',
    description: '主要由金黄色葡萄球菌或乙型溶血性链球菌引起，表现为丘疹、水疱或脓疱，易破溃结蜜黄色痂。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '带状疱疹',
    description: '由水痘 - 带状疱疹病毒引起，皮疹一般有单侧性和按神经节段分布的特点，由集簇性的疱疹组成，并伴有疼痛。',
    image: 'src/assets/images/case.png' // 替换为真实路径
  },
  {
    name: '脓疱疮',
    description: '主要由金黄色葡萄球菌或乙型溶血性链球菌引起，表现为丘疹、水疱或脓疱，易破溃结蜜黄色痂。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '带状疱疹',
    description: '由水痘 - 带状疱疹病毒引起，皮疹一般有单侧性和按神经节段分布的特点，由集簇性的疱疹组成，并伴有疼痛。',
    image: 'src/assets/images/case.png' // 替换为真实路径
  },
  {
    name: '脓疱疮',
    description: '主要由金黄色葡萄球菌或乙型溶血性链球菌引起，表现为丘疹、水疱或脓疱，易破溃结蜜黄色痂。',
    image: 'src/assets/images/case.png'
  }
]);

const allergicDiseases = ref([
  {
    name: '湿疹',
    description: '是由多种内外因素引起的瘙痒剧烈的一种皮肤炎症反应，皮损具有多形性、对称性、瘙痒和易反复发作等特点。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '荨麻疹',
    description: '由于皮肤、黏膜小血管扩张及渗透性增加而出现的一种局限性水肿反应，通常在2 - 24小时内消退，但反复发生新的皮疹。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '湿疹',
    description: '是由多种内外因素引起的瘙痒剧烈的一种皮肤炎症反应，皮损具有多形性、对称性、瘙痒和易反复发作等特点。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '荨麻疹',
    description: '由于皮肤、黏膜小血管扩张及渗透性增加而出现的一种局限性水肿反应，通常在2 - 24小时内消退，但反复发生新的皮疹。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '湿疹',
    description: '是由多种内外因素引起的瘙痒剧烈的一种皮肤炎症反应，皮损具有多形性、对称性、瘙痒和易反复发作等特点。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '荨麻疹',
    description: '由于皮肤、黏膜小血管扩张及渗透性增加而出现的一种局限性水肿反应，通常在2 - 24小时内消退，但反复发生新的皮疹。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '湿疹',
    description: '是由多种内外因素引起的瘙痒剧烈的一种皮肤炎症反应，皮损具有多形性、对称性、瘙痒和易反复发作等特点。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '荨麻疹',
    description: '由于皮肤、黏膜小血管扩张及渗透性增加而出现的一种局限性水肿反应，通常在2 - 24小时内消退，但反复发生新的皮疹。',
    image: 'src/assets/images/case.png'
  }
]);

const autoimmuneDiseases = ref([
  {
    name: '红斑狼疮',
    description: '是一类复杂的自身免疫性疾病，可分为皮肤型和系统性，皮肤表现多样，如蝶形红斑等。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '皮肌炎',
    description: '是一种主要累及皮肤和肌肉的自身免疫性疾病，典型的皮肤损害为眶周紫红色斑、Gottron丘疹等，同时伴有肌无力症状。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '红斑狼疮',
    description: '是一类复杂的自身免疫性疾病，可分为皮肤型和系统性，皮肤表现多样，如蝶形红斑等。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '皮肌炎',
    description: '是一种主要累及皮肤和肌肉的自身免疫性疾病，典型的皮肤损害为眶周紫红色斑、Gottron丘疹等，同时伴有肌无力症状。',
    image: 'src/assets/images/case.png'
  }
]);

const pigmentDisorderDiseases = ref([
  {
    name: '白癜风',
    description: '是一种常见的后天性限局性或泛发性皮肤色素脱失病，由于皮肤的黑素细胞功能消失引起。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '黄褐斑',
    description: '多见于女性，主要表现为颜面部的黄褐色色素沉着斑，对称分布，边界清楚。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '白癜风',
    description: '是一种常见的后天性限局性或泛发性皮肤色素脱失病，由于皮肤的黑素细胞功能消失引起。',
    image: 'src/assets/images/case.png'
  },
  {
    name: '黄褐斑',
    description: '多见于女性，主要表现为颜面部的黄褐色色素沉着斑，对称分布，边界清楚。',
    image: 'src/assets/images/case.png'
  }
]);

// 当前显示的皮肤病种类
const currentCategory = ref('infectiousDiseases');

// 根据当前种类获取相应皮肤病数据
const getCurrentDiseases = () => {
  if (currentCategory.value === 'infectiousDiseases') {
    return infectiousDiseases.value;
  } else if (currentCategory.value === 'allergicDiseases') {
    return allergicDiseases.value;
  } else if (currentCategory.value === 'autoimmuneDiseases') {
    return autoimmuneDiseases.value;
  } else if (currentCategory.value === 'pigmentDisorderDiseases') {
    return pigmentDisorderDiseases.value;
  }
  return [];
};

// 新增，返回首页按钮点击事件处理函数
const goToHome = () => {
  router.push('/Home');
};
const goToDetails = () => {
  router.push('/DiseasesDetails')
}
</script>

<template>
  <div class="mx-auto">
    <img src="../../public/images/home-bg.png" alt="bg" class="w-full fixed m-0" />
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#2C9BD5FF"
      text-color="#fff"
      active-text-color="#FFF080FF"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0" style="font-size: 24px" >皮肤病识别及分类系统</el-menu-item>
      <el-menu-item index="1" @click="goToHome">返回首页</el-menu-item>
      <el-sub-menu index="2">
        <template #title>皮肤病分类</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="3">识别结果</el-menu-item>
      <el-menu-item index="4">用户反馈</el-menu-item>
      <el-menu-item index="5">关于我们</el-menu-item>
    </el-menu>
    <!-- 顶部按钮栏 -->
    <div class="flex justify-center space-x-4 mb-6 relative">
      <button
          class="px-4 py-2 mt-8 text-2xl font-medium border shadow-md border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          @click="currentCategory = 'infectiousDiseases'"
      >
        感染性皮肤病
      </button>
      <button
          class="px-4 py-2 mt-8 text-2xl font-medium border shadow-md border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          @click="currentCategory = 'allergicDiseases'"
      >
        过敏性皮肤病
      </button>
      <button
          class="px-4 py-2 mt-8 text-2xl font-medium border shadow-md border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          @click="currentCategory = 'autoimmuneDiseases'"
      >
        自身免疫性皮肤病
      </button>
      <button
          class="px-4 py-2 mt-8 text-2xl font-medium border shadow-md border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          @click="currentCategory = 'pigmentDisorderDiseases'"
      >
        色素障碍性皮肤病
      </button>
    </div>
    <!-- 皮肤病展示区 -->
    <div class="flex flex-wrap relative">
      <div v-for="(disease, index) in getCurrentDiseases()" :key="index" class="w-1/4 px-4 mb-8">
        <div class="p-6 border rounded-lg shadow-md bg-white">
          <h3 class="text-xl font-semibold mb-2 hover:text-blue-600">{{ disease.name }}</h3>
          <p v-if="disease.description.length > 69" class="text-gray-700">{{ disease.description.slice(0, 69) + '...' }}</p>
          <p v-else class="text-gray-700">{{ disease.description.padEnd(69)}}</p>
          <div class="demo-image__preview">
            <el-image
              style="width: 100%"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              :initial-index="4"
              fit="cover"
              @click="goToDetails"
            />
          </div>
<!--          <img :src="disease.image" alt="{{ disease.name }}" class="w-full h-auto mt-4 rounded-lg" />-->
        </div>
      </div>
      <div class="mx-auto relative mb-14">
        <el-pagination background layout="prev, pager, next" :total="1000"/>
      </div>
    </div>
    <!-- 返回顶部按钮 -->
    <el-backtop :right="100" bottom="80">
      <div
        style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>